<template>
	<view class="remaining-sum">
		<!-- 用户端   查看余额 -->
		<u-navbar leftIconSize="34rpx" autoBack :placeholder="true" bgColor="#ffffff">
			<view class="" slot="center">
				<text class="c-000 pf-sc fw-600" style="font-size: 34rpx;">余额明细</text>
			</view>
		</u-navbar>
		<view
			class="set-data-container w-750 b-box d-flex flex-c ali-i-c  bg-fa po-re"
			style="padding-top:20rpx;"
			:style="{ height: containerHeight }"
		>
			<!-- 1 -->
			<view
				class="w-100 bg-ff d-flex flex-c ali-i-s just-sw b-box"
				style="height: 234rpx;padding: 64rpx 38rpx 52rpx 40rpx;margin-bottom: 20rpx;"
			>
				<view class="d-flex flex-r ali-i-c just-sw w-100" style="margin-bottom: 5rpx;">
					<view class="d-flex flex-r ali-i-c just-s w-100">
						<image
							:src="require('../static/yue.png')"
							style="width: 60rpx;height: 64rpx;margin-right: 8rpx;"
						></image>
						<text class="pf-sc fw-600 c-333" style="font-size: 64rpx;">
							￥{{ moneyInfo.money }}
						</text>
					</view>
					<view style="width:160rpx">
						<u-button
							:throttleTime="700"
							@click="GoRecharge"
							plain
							:customStyle="{
								height: '72rpx',
								width: '160rpx',
								font: '500 32rpx PingFang SC',
								color: '#26387C',
								border: '2rpx solid #26387C',
								borderRadius: '44rpx'
							}"
							shape="square"
							text="充值"
						></u-button>
					</view>
				</view>
				<!--  -->
				<view class="d-flex flex-r ali-i-c just-s w-100">
					<text class="c-333 pf-sc fw-400" style="font-size: 28rpx;margin-left: 80rpx;">
						我的账户余额
					</text>
				</view>
			</view>
			<!-- 2 -->
			<view class="w-100 b-box d-flex flex-c bg-ff" style="flex: 1;">
				<!--  -->
				<view
					class="w-100 b-box po-re bg-ff"
					style="padding: 0 36rpx;border-bottom: 2rpx solid #F6F6F6;"
				>
					<view style="height: 106rpx;" class="d-flex flex-r ali-i-c just-sw">
						<text class="fw-500 pf-sc " style="font-size: 30rpx;color: rgba(0,0,0,0.9000);">
							余额明细
						</text>
					</view>
					<view
						class="po-ab"
						style="width: 32rpx;height:6rpx;background: #FF5C00;opacity: 1;transform: rotate(90deg);left: -14rpx;top: 49%;"
					></view>
				</view>
				<!--  -->
				<view class="w-100 b-box bg-ff" style="padding: 0 32rpx;">
					<!-- 这里循环数据 -->
					<view
						style="height: 124rpx;border-bottom: 2rpx solid #F6F6F6;margin-bottom: 30rpx;"
						class="d-flex flex-r ali-i-c just-sw"
						v-for="(item, index) in moneyList"
						:key="index"
					>
						<view class=" d-flex flex-c ali-i-s just-s" style="flex: 1;">
							<text
								class="pf-sc fw-400"
								
								style="font-size: 30rpx;color: rgba(0,0,0,0.9000);margin-bottom: 8rpx;padding-top: 50rpx;"
							>
								{{ item.memo }}
							</text>
							<text class="pf-sc fw-400" style="font-size:24rpx;color: #999999;">
								{{ item.createtime.slice(-8) }}
							</text>
						</view>
						<view class="d-flex flex-rr ali-i-c" style="flex: 1.5;">
							<text class="fw-500 pf-sc" style="font-size: 34rpx;color: #FF5C00;">
								{{ item.symbol }}{{ item.money }}
							</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { moneylog } from '@/common/api.js';
import { _containerHeight } from '@/utils/GetSys.js';
import Unavbar from '../components/uview-ui/components/u-navbar/u-navbar';
import Ubutton from '../components/uview-ui/components/u-button/u-button';

export default {
	components: {
		'u-navbar': Unavbar,
		'u-button': Ubutton
	},
	data() {
		return {
			containerHeight: '',
			moneyList: [],
			moneyInfo: {},
			page: 1
		};
	},
	methods: {
		getList() {
			// 发送请求 余额明细.
			let params = {
				token: uni.getStorageSync('usertoken'),
				page: this.page
			};
			moneylog(params).then(res => {
				this.moneyInfo = res.data.data.userinfo;
				this.moneyList = res.data.data.list;
				// console.log(this.moneyInfo, this.moneyList);
			});
		},
		GoRecharge() {
			//充值
			uni.navigateTo({
				url: '/userModelA/userB/Recharge/Recharge'
			});
		}
	},
	onReachBottom() {
		let params = {
			token: uni.getStorageSync('usertoken'),
			page: this.page++
		};
		moneylog(params).then(res => {
			if (res.data.data.list.length > 0) {
				if (this.page == 1) {
					(this.moneyList = []), (this.moneyList = res.data.data.list);
				} else {
					this.moneyList = this.moneyList.concat(...res.data.data.list);
				}
			} else {
				uni.showToast({
					title: '暂无更多内容',
					icon: 'none'
				});
				//
			}
			// console.log(this.moneyInfo, this.moneyList);
		});
		// 发送请求 余额明细.
		// let params = {
		// 	token: uni.getStorageSync('usertoken'),
		// 	page: this.page++
		// };
		// moneylog(params).then(res => {
		// 	// console.log(res.data.data.list);
		// 	if (res.data.data.list.length >= 10) {
		// 		this.moneyList = this.moneyList.concat(res.data.data.list);
		// 	} else {
		// 		console.log('最后一页',res.data.data.list);
		// 		uni.showToast({
		// 			title: '没有更多数据了',
		// 			icon: 'none'
		// 		});
		// 	}
		// });
	},
	onLoad() {
		this.containerHeight = _containerHeight();
		this.getList();
	},
	onShow() {}
};
</script>

<style lang="scss">
.remaining-sum {
}
</style>
